<template>
    <div class="container">
        <h1 :class="{hidden:activeItem.id}">时间段福建省对接焊缝估计很大手机哈估计会送达</h1>

        <template v-for="(item,index) in dataList">
            <transition name="item-hidden" :key="index">
                <div class="item" :style="activeStyle" :class="{'active-item':item.id===activeItem.id}" v-if="!activeItem.id||item.id===activeItem.id" @click="handleClick(item)">
                    <div class="num">{{(index+1).toString().padStart(2,'0')}}</div>
                    <div class="content">
                        <div>{{item.title}}</div>
                        <div>{{item.des}}</div>
                    </div>
                </div>
            </transition>
        </template>

    </div>
</template>

<script>
export default {
    data () {
        return {
            activeItem: {},
            dataList: []
        }
    },
    computed: {
        activeStyle () {
            const i = this.dataList.findIndex(x => x.id === this.activeItem.id)

            return {
                '--top': `-${i * 124}px`
            }
        }
    },
    methods: {
        addZero (num) {
            return num.toString().padStart(2, '0')
        },
        handleClick (item) {
            this.activeItem = this.activeItem.id === item.id ? {} : item
        },
        filterNum (item) {
            const i = this.dataList.findIndex(x => x.id === item.id)
            return this.addZero(i + 1)
        }
    },
    created () {
        for (let i = 1; i < 6; i++) {
            const obj = {
                id: `id${i}`,
                title: `标题${this.addZero(i)}`,
                des: '地方金海环境大范甘迪激发光科技大发啦更大理发卡高可达理发'
            }
            this.dataList.push(obj)
        }
    }
}
</script>

<style lang="less" scoped>
.item-hidden-enter-active,
.item-hidden-leave-active {
    transition: all .4s;
}

.item-hidden-enter,
.item-hidden-leave-to {
    opacity: 0;
    // top: 80%;
}

.container {
    h1 {
        height: 100px;
        background-color: antiquewhite;
        transition: height .4s;
    }

    .hidden {
        height: 0;
        overflow: hidden;
        transition: height .4s;
    }

    .item {
        display: flex;
        align-items: center;
        height: 124px;
        padding: 0 20px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: all .5s;
        background-color: #fff;
        position: relative;
        top: 0;

        &:hover {
            top: -4px;
            background: #DDEDFD;
            box-shadow: 10px 10px 30px rgba(78, 149, 255, 0.05);
            transition: all .5s;
            z-index: 2;
        }

        .num,
        .content>div:first-child {
            font-size: 24px;
            font-weight: bold;
        }

        .num {
            margin-right: 50px;
        }
    }
        .active-item {
            animation: show .4s;
            z-index: 999;

            @keyframes show {
                0% {
                    top: 0;
                }

                100% {
                    top: var(--top)
                }
            }
        }
}
</style>
